import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import { styled } from '@mui/material/styles';
import * as React from 'react';

const BorderLinearProgress = styled(LinearProgress)(() => ({
    height: 6,
    borderRadius: 100,
    [`&.${linearProgressClasses.colorPrimary}`]: {
        background: 'rgba(33, 31, 61, 1)'
    },
    [`& .${linearProgressClasses.bar}`]: {
        borderRadius: 5,
        background: 'linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)'
    }
}));

export interface ProgressBarProps {
    progress: number;
}

export default function NewProgressBar(props: ProgressBarProps) {
    return <BorderLinearProgress variant="determinate" value={props.progress} />;
}
